<section [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="container max-w-6xl p-6 mx-auto space-y-6 sm:space-y-12">
		<a
			class="block max-w-sm gap-3 mx-auto sm:max-w-full group hover:no-underline focus:no-underline lg:grid lg:grid-cols-12"
			[ngClass]="['bg' + contrast]"
			rel="noopener noreferrer"
			href="#"
		>
			<img
				src="https://source.unsplash.com/random/480x360"
				alt=""
				class="object-cover w-full h-64 rounded sm:h-96 lg:col-span-7 bg-gray-500"
			/>
			<div class="p-6 space-y-2 lg:col-span-5">
				<h3
					class="text-2xl font-semibold sm:text-4xl group-hover:underline group-focus:underline"
				>
					Noster tincidunt reprimique ad pro
				</h3>
				<span class="text-xs" [ngClass]="['text' + plainInv]">February 19, 2021</span>
				<p class="">
					Ei delenit sensibus liberavisse pri. Quod suscipit no nam. Est in graece
					fuisset, eos affert putent doctus id.
				</p>
			</div>
		</a>
		<div class="grid justify-center grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
			<a
				class="max-w-sm mx-auto group hover:no-underline focus:no-underline"
				[ngClass]="['bg' + contrast, i > 3 ? 'hidden sm:block' : '']"
				rel="noopener noreferrer"
				href="#"
				*ngFor="let i of [1, 2, 3, 4, 5, 6]"
			>
				<img
					class="object-cover w-full rounded h-44 bg-gray-500"
					src="https://source.unsplash.com/random/480x360?{{ i }}"
					role="presentation"
				/>

				<div class="p-6 space-y-2">
					<h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">
						In usu laoreet repudiare legendos
					</h3>
					<span class="text-xs" [ngClass]="['text' + plainInv]">
						January 2{{ i }}, 2021
					</span>
					<p class="">
						Mei ex aliquid eleifend forensibus, quo ad dicta apeirian neglegentur, ex
						has tantas percipit perfecto. At per tempor albucius perfecto, ei probatus
						consulatu patrioque mea, ei vocent delicata indoctum pri.
					</p>
				</div>
			</a>
		</div>
		<div class="flex justify-center">
			<button
				type="button"
				class="px-6 py-3 text-sm rounded-md hover:underline"
				[ngClass]="['bg' + contrast, 'text' + plainInv]"
			>
				Load more posts...
			</button>
		</div>
	</div>
</section>
